---
order: 0
title: Renderer Overview
type: Graphics
group: Renderer
label: Graphics/Renderer
---

The renderer is responsible for displaying graphics as a [**component**](/en/docs/core/component). It displays the corresponding rendering effects based on different data sources. By mounting the renderer on a node and setting the corresponding rendering data, various complex 3D scenes can be displayed.

## Types of Renderers

In Galacean, the following types of renderers are built-in:

- [Mesh Renderer](/en/docs/graphics/renderer/meshRenderer/): Renders objects by setting `mesh` and `material`.
- [Skinned Mesh Renderer](/en/docs/graphics/renderer/skinnedMeshRenderer): Based on the [Mesh Renderer](/en/docs/graphics/renderer/meshRenderer/), it additionally includes capabilities for `skeletal animation` and `Blend Shape`, making the animation effects of objects more natural.
- [Sprite Renderer](/en/docs/graphics/2D/spriteRenderer/): By setting `sprite` and `material` (default built-in sprite material), 2D images can be displayed in the scene.
- [Sprite Mask Renderer](/en/docs/graphics/2D/spriteMask/): Used to implement masking effects for the sprite renderer.
- [Text Renderer](/en/docs/graphics/2D/text/): Displays text in the scene.
- [Particle Renderer](/en/docs/graphics/particle/renderer/): Displays particle effects in the scene.

You can learn more about the rendering order of various renderers in the engine through [Rendering Order](/en/docs/graphics/renderer/order/).

## Properties

`Renderer` is the base class for all renderers in Galacean, and it includes the following properties:

| Property          | Description                                          |
| :---------------- | :--------------------------------------------------- |
| `receiveShadows`  | Whether to receive shadows                           |
| `castShadows`     | Whether to cast shadows                              |
| `priority`        | The rendering priority of the renderer, the smaller the value, the higher the priority, default is 0 |
| `shaderData`      | Data dependent on rendering, including some constants and macro switches |
| `materialCount`   | Total number of materials contained in the renderer  |
| `bounds`          | World bounding box of the renderer                   |
| `isCulled`        | Whether the renderer is rendered in the current frame |

You can get these properties from any renderer derived from `Renderer`.

```typescript
const renderer = cubeEntity.getComponent(Renderer);
renderer.castShadows = true;
renderer.receiveShadows = true;
renderer.priority = 1;
console.log("shaderData", renderer.shaderData);
console.log("materialCount", renderer.materialCount);
console.log("bounds", renderer.bounds);
console.log("isCulled", renderer.isCulled);
```

Below shows how to get the overall bounding box of multiple `Renderers`:

<Playground href="/embed/bounding-box" />

## Methods

The `Renderer` base class mainly provides methods for setting and getting materials. It is important to note that a renderer may contain multiple materials, so the following methods are more like **manipulating an array of materials**.

| Method                | Description                |
| :-------------------- | :------------------------- |
| `setMaterial`         | Sets a material in the array |
| `getMaterial`         | Gets a material from the array |
| `getMaterials`        | Gets the array of materials |
| `getInstanceMaterial` | Gets a copy of a material from the array |
| `getInstanceMaterials`| Gets copies of the array of materials |

